<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text-over {
            width: 200px;
            overflow: hidden;
            /* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
            white-space: nowrap;
            /* “用一个省略号 ('…')来表示被截断的文本 */
            text-overflow: ellipsis;
        }

        .textarea-over {
            width: 100px;
            /* 为了实现该效果，它需要组合其他的WebKit属性。 */
            /* display: -webkit-box;必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 */
            display: -webkit-box;
            /* -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 */
            -webkit-box-orient: vertical;
            /* 用来限制在一个块元素显示的文本的行数。 */
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>

    <div class="text-over">
        CSS实现单行文本溢出部分省略（...）显示
    </div>
    <div class="textarea-over">
        CSS实现多行文本溢出部分省略（...）显示
    </div>
</body>

</html>